<template>
   <div>
     <zm-table-data
        :data="tableData"
        ref="multipleTable"
        :columns="columns"
        height="250"
      >
      </zm-table-data>

      <!-- 编辑模板字段 -->
      <zm-dialog
        title="编辑模板"
        :visible.sync="visible"
        append-to-body
        :before-close="handleClose"
        :close-on-click-modal="false"
        @change="handleClose"
        @confirm="onConfirm"
      >
      <div class="flex1 plr20">
        <el-form ref="form" :model="itemInfo" :rules="rules">
          <el-form-item label="模板名称：" prop="name">
            <el-input class="w300" v-model.trim="itemInfo.name" maxlength="20" clearable show-word-limit placeholder="请输入模板名称"></el-input>
          </el-form-item>
           <zm-form-item label="是否公开模板" prop="isPublic">
            <el-switch v-model="itemInfo.isPublic" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
          </zm-form-item>
          <el-form-item label="导出字段：" prop="exportField"></el-form-item>
          <zm-checkbox v-model="itemInfo.exportField" :list="exportList" :option="{isShowInvertSelect:true}" more-style="mb20"></zm-checkbox>
        </el-form>
      </div>
    </zm-dialog>
   </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import {columns} from './const'
import exportTemplateApis from '@/api/src/exportTemplate'
import dialogMixin from '@/mixins/dialogMixin'
export default {
  name: 'ExportTemplate',
  components: {},
  mixins: [tableMixin, dialogMixin],
  props: {
    exportList: { // 模板字段
      type: Array,
      required: true,
      default: []
    },
    isPublic: {
      type: String,
      default: '1'
    },
    type: { // 请求的模板数据类型
      type: String,
      default: '',
      required: true
    }
  },
  data () {
    return {
      radio: '',
      visible: false,
      tableData: [],
      itemInfo: {
        name: '',
        exportField: '',
        isPublic: '',
        id: ''
      },
      rules: {
        name: {
          required: true,
          message: '请填写模板名称'
        },
        isPublic: {
          required: true,
          message: '请选择'
        },
        exportField: {
          required: true,
          message: '请选择导出字段'
        }
      }

    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const params = {
        type: this.type,
        isPublic: this.isPublic
      }
      const res = await exportTemplateApis.getList(params)
      this.tableData = res.list
      // this.radio = this.tableData[0].id
    },
    handleChange (row) {
      this.$emit('after-save', row)
    },
    onEdit (row) {
      this.itemInfo = {
        name: row.name,
        exportField: row.exportField,
        id: row.id,
        isPublic: row.isPublic
      }
      this.visible = true
    },
    onDel (row) {
      this.$confirm('是否确认删除该模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await exportTemplateApis.delete({ id: row.id })
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(() => {})
    },
    handleClose () {
      this.visible = false
    },
    async onConfirm () {
      const params = {
        ...this.itemInfo,
        type: this.type
      }
      this.$refs.form.validate(async valid => {
        if (valid) {
          await exportTemplateApis.createUpdate(params)
          this.getList()
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
/deep/ .el-checkbox-group label {
  margin-bottom: 20px;
}
</style>
